<template>
	<view style="background-color: #FFFFFF;min-height: 100vh;padding-bottom: 60px;">
		<view style="box-sizing: border-box; padding: 10px; border-radius: 8px; background: #fff; margin-bottom: 10px;"
		>
			<view>
				<swiper style="height: 600rpx;">
					<swiper-item v-for="i in info.images"  style="height:600rpx;">
						<image style="width: 100%;" mode="widthFix"
						:src="i"></image>
					</swiper-item>
				</swiper>
			</view>
			<view style="font-weight: bold; font-size: 18px; line-height: 36px;">
				{{info.name}}
			</view>
			<view style="line-height: 22px; font-size: 14px;">
				{{info.describe}}
			</view>
			<view style="color: #FA9700; line-height: 36px;">
				已有{{info.buy_num}}人为他许愿
			</view>
			<view>
				<!-- <u-button @click.stop="show=true, shopInfo = i" 
				shape="circle" type="warning">￥{{info.price}}为他许愿</u-button> -->
			</view>
		</view>
		<view style="box-sizing: border-box; padding: 10px 10px 0 10px; ">
			<view style="line-height: 46px; font-weight: bold;">
				选择服务
			</view>
			<view>
				<view class="xuyuanlist"
				@tap="selectServer = i.id, serverPrice = i.price, 
				allPrice = parseFloat(info.price) + parseFloat(serverPrice)"
				 :style="selectServer === i.id ? 'color: #fff; backgroundColor: #FA9700' : ''"
				 style="" v-for="i in serverList" :key="i.id">
					{{i.name}}
				</view>
			</view>
			
			<view style="width: 100%; overflow: hidden;">
				<view style="display: flex; line-height: 46px;">
					<view>
						收货地址
					</view>
					<view 
					@tap="tipPage('/pages/address/address')"
					style="font-size: 14px; color: #999; margin-left: auto;
					text-align: right;
					width: 60%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					">
					<template v-if="address === ''">
						请选择
						<u-icon name="arrow-right"></u-icon>
					</template>
						<template v-else>
							{{address}}
							</template>
					</view>
				</view>
			</view>
			
			<view>
				<view style="line-height: 46px; font-weight: bold;">
					备注
				</view>
				<view>
					<u-input v-model="remark" :type="type" :border="border" />
				</view>
			</view>
			
			<view style="border-top: #ccc solid 1px; height: 50px; margin-top: 10px; display: flex; line-height: 50px;" class="bottoms">
				<view style="width: 50%; line-height: 46px;">
					共计：<text style="color:#FA9700; ;">￥{{allPrice}}</text> 
				</view>
				<view style="width: 50%; text-align: right; margin: auto;">
					<u-button  shape="circle" size="medium" type="warning"
					@tap="createSubmit()"
					>立即购买</u-button>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {serverList, createOrder} from './request.js'
	export default{
		data () {
			return {
				show:false,
				remark: '',
				type: 'textarea',
				border: true,
				mountains_id: '',
				list: [],
				serverList: [],
				selectServer: -1,
				shopInfo: {},
				address: '',
				address_id: '', 
				goods_id: '',
				width: '',
				height: '',
				info: {},
				serverPrice: '',
				allPrice: '',
				x:'',
				y: ''
			}
		},
		onLoad(option) {
			this.info = JSON.parse(decodeURIComponent(option.info))
			this.x = option.x
			this.y = option.y
			this.allPrice = this.info.price
			this.width = uni.getSystemInfoSync().screenWidth
			this.height = uni.getSystemInfoSync().screenHeight
			this.getServerList()
			
		},
		methods: {
			// 获取服务列表
			getServerList () {
				serverList().then(res => {
					console.log(res)
					if (res.data.code === 1) {
						this.serverList = res.data.data
					}
				})
			},
			// 跳转页面
			tipPage (path) {
				uni.navigateTo({
					url: `${path}?type=xuyuan`
				})
			},
			createSubmit () {
				if (this.selectServer === -1) {
					uni.showToast({
						title: '请挑选服务！',
						icon: 'none',
						duration: 2000
					})
					return
				}
				let params = {
					goods_id: this.info.id,
					serve_id: this.selectServer,
					x: this.x,
					y: this.y,
					screen_size: this.width + ',' + this.height
				}
				if (this.address_id) {
					params.address_id = this.address_id
				}
				if (this.remark !== '') {
					params.remark = this.remark
				}
				createOrder(params).then(res => {
					console.log(res)
					if (res.data.code === 1) {
						console.log('进入能解决')
						
						uni.navigateTo({
							url: '../pay/pay?orderId=' + res.data.data.order_no + '&price=' + this.allPrice
						})
					}
				})
			},
			jump (path, info) {
				console.log('跳转')
				uni.navigateTo({
					url: `./xunyuanDetail?info=${encodeURIComponent(JSON.stringify(info))}`
				})
			}
		}
	}
</script>
<style>

.xuyuanlist{
	font-size: 14px; color: #666;border: #ccc solid 1px; padding: 10px 20px; border-radius: 8px; float: left; margin-bottom: 10px;
}
.bottoms{
	position: fixed;
	left: 0;
	bottom: 0;
	width:100%;
	padding: 0 20rpx;
	background-color: #FFFFFF;
}
</style>

